<!DOCTYPE HTML>
<html>
<head>
	<meta charset="utf-8">
	<title>PageHeader 页头</title>
	<link rel="stylesheet" href="../static/css/element2.css">
	<script src="../static/js/vue.global.prod.js"></script>
	<script src="../static/js/element-plue2.js"></script>
	
	<link rel="stylesheet" href="../static/css/com.css">
<style type="text/css">
.font-600{
	font-weight: 600;
	margin-right: 0.75rem;
}
</style>
</head>
<body>
<div id="app" class="">
	<el-divider content-position="left">基础用法</el-divider><!-- =============================================================== -->
	<p class="desc">简单场景下的标准页头。</p>
	<el-page-header @back="goBack">
		<template #content>
			<span class="text-large font-600 mr-3"> Title </span>
		</template>
	</el-page-header>
	
	<el-divider content-position="left">完整示例</el-divider><!-- =============================================================== -->
	<p class="desc">如果页面的路径比较简单，推荐使用页头组件而非面包屑组件。</p>
	<p class="desc">可能是版本原因，渲染异常，实际使用不多，不深入研究</p>
	<div aria-label="A complete example of page header">
		<el-breadcrumb separator="/">
			<el-breadcrumb-item><a href="#">homepage</a></el-breadcrumb-item>
			<el-breadcrumb-item><a href="#">route 1</a></el-breadcrumb-item>
			<el-breadcrumb-item>route 2</el-breadcrumb-item>
		</el-breadcrumb>
		<div class="h10"></div>
		<el-page-header @back="onBack">
			<template #content>
				<div class="flex items-center">
					<el-avatar class="mr-3" :size="32" src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"></el-avatar>
					<span class="text-large font-600 mr-3"> Title </span>
					<span class="text-sm mr-2" style="color: var(--el-text-color-regular)">Sub title</span>
					<el-tag>Default</el-tag>
				</div>
			</template>
			<template #extra>
				<div class="flex items-center">
					<el-button>Print</el-button>
					<el-button type="primary" class="ml-2">Edit</el-button>
				</div>
			</template>
			
			<el-descriptions :column="3" size="small" class="mt-4">
				<el-descriptions-item label="Username">kooriookami</el-descriptions-item>
				<el-descriptions-item label="Telephone">18100000000</el-descriptions-item>
				<el-descriptions-item label="Place">Suzhou</el-descriptions-item>
				<el-descriptions-item label="Remarks">
					<el-tag size="small">School</el-tag>
				</el-descriptions-item>
				<el-descriptions-item label="Address">No.1188, Wuzhong Avenue, Wuzhong District, Suzhou, Jiangsu Province
				</el-descriptions-item>
			</el-descriptions>
			<p class="mt-4 text-sm">
				Element Plus team uses <b>weekly</b> release strategy under normal
				circumstance, but critical bug fixes would require hotfix so the actual
				release number <b>could be</b> more than 1 per week.
			</p>
		</el-page-header>
	</div>
	
	<el-divider content-position="left">自定义图标</el-divider><!-- =============================================================== -->
	<p class="desc">默认图标可能无法满足您的需求，您可以通过设置icon属性来自定义图标，示例如下。</p>
	
	
	<el-divider content-position="left">无图标</el-divider><!-- =============================================================== -->
	<p class="desc">有时，页面全是元素，您可能不想展示页面上方的图标，您可以设置icon属性值为null来去除它。</p>
	
	
	<el-divider content-position="left">面包屑导航</el-divider><!-- =============================================================== -->
	<p class="desc">使用页头组件，您可以通过添加插槽 breadcrumb 来设置面包屑路由导航。</p>
	
	
	<el-divider content-position="left">额外操作部分</el-divider><!-- =============================================================== -->
	<p class="desc">头部可能会变得很复杂，您可以在头部添加更多的区块，以允许丰富的交互。</p>
	
	
	<el-divider content-position="left">主要内容</el-divider><!-- =============================================================== -->
	<p class="desc">有时我们想让页头显示一些协同响应内容，我们可以使用 default 插槽。</p>
	
	
	<el-divider content-position="left">组件插槽结构</el-divider><!-- =============================================================== -->
	<p class="desc">本组件由这些部件构成：</p>
	<!-- 
	<template>
		<el-page-header>
			
			<template #breadcrumb />
			
			<template #icon />
			<template #title />
			<template #content />
			<template #extra />
			
			<template #default />
		</el-page-header>
	</template>
	 -->
	
	
	
	
	
</div>

</body>
<script>
const Main = {
	data() {
		return {
			message: 'Hello Vue!!'
		}
	},
	methods:{
		goBack(){
			console.log('goBack');
		},
		onBack(){
			console.log('onBack');
		},
		
	}
}

const app = Vue.createApp(Main);
app.use(ElementPlus);
let vm = app.mount("#app");
</script>
</html>